<template>
	<view class="page">
		<view class="top-box">
			<view class="info-box">
				<image :src="userInfo.headimg" mode=""></image>
				<view>我的推荐人：{{userInfo.parent_name}}</view>
				<view>团队总数：{{userInfo.term_totals}}人</view>
			</view>
			<view class="aoumtArr">
				<view class="aoumtItem">
					<view class="num">
						{{userInfo.order_totals}}
					</view>
					<view class="label">
						带货累计
					</view>
				</view>
				<view class="aoumtItem">
					<view class="num">
						{{userInfo.region_totals}}
					</view>
					<view class="label">
						小区业绩
					</view>
				</view>
				<view class="aoumtItem">
					<view class="num">
						{{userInfo.all_totals}}
					</view>
					<view class="label">
						总业绩
					</view>
				</view>
			</view>
		</view>
		<view class="arr">
			<view class="arrType">
				<view class="arrTypeItem" v-for="(item,index) in typeArr" :key="index" @click="changeType(item.id)">
					<view :class="item.id == typeIndex ?  'activeColor' : '' ">
						{{item.label}}
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 50vh;"  @scrolltolower="scrolltolower">
				<view>
					<view class="arrItem" v-for="(item,index) in arr" :key="index">
						<view class="topContent">
							<view class="cover">
								<image :src="item.headimg" mode=""></image>
							</view>
							<view class="desc">
								<text class="name">
									{{item.nickname}} ({{item.level_name}})
								</text>
								<text>id:{{item.member_id}} </text>
								<text>{{item.create_time_text}}</text>
							</view>
						</view>
						<view class="bottomContent">
							<view class="rowItem">
								<view class="label">
									自购订单：{{item.order_num}}
								</view>
								
							</view>
							<view class="rowItem">
								<view class="label">
									带货积累：{{item.order_totals}}
								</view>
							</view>
							<view class="rowItem">
								<view class="label">
									团队人数：{{item.term_totals}}
								</view>
							</view>
							<view class="rowItem">
								<view class="label">
									团队业绩：{{item.all_totals}}
								</view>
							</view>
						</view>
					</view>
					<noMore v-if="!arr.length"></noMore>
				</view>
			</scroll-view>
		
		</view>
	
	</view>
</template>

<script>
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				userInfo:{	},
				arr:[ ],
				page: 1 ,
				pageSize: 10 ,
				typeArr:[
					{
						id: 1,
						label: '直推',
					},
					{
						id: 2,
						label: '间推',
					},
				],
				typeIndex: 1 ,
				
			};
		},
		onLoad(){
			this.getUserInfo()
			this.getArr()
		},
		methods: {
			scrolltolower(){
				this.page++
				this.getArr()
			},
			changeType(_id){
				this.typeIndex = _id
				this.page = 1
				this.getArr()
			},
			getUserInfo(){
				this.myHttp({
					url:'/fenxiao/api/Team/info',
				}).then(res=>{
					this.userInfo = res.data.info
					this.typeArr[0].label= `直推 (${res.data.info.recommend_totals})`
					this.typeArr[1].label= `间推 (${res.data.info.indirect_totals})`
				})
			},
			getArr(){
				this.myHttp({
					url:'/fenxiao/api/Team/list',
					data:{
						parent_type : this.typeIndex,//1直推 2.间推
						page_size: 10,
						page: this.page,
					}
				}).then(res=>{
					if(this.page==1){
						this.arr = []
					}
					this.arr = this.arr.concat(res.data.list)
				})
			},
			
		},
		components:{
			noMore,
		}
	}
</script>

<style scoped lang="scss">
	.page{
		@include flexCol;
		align-items: center;
		background-color: #f2f2f2;
		height: 100vh;
		padding: 20rpx;
		.top-box{
			width: 700rpx;
			height: 419rpx;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 0 27rpx;
			@include flexCol;
			.info-box{
				flex: 1;
				@include flexCol;
				align-items: center;
				justify-content: space-evenly;
					image{
						width: 141rpx;
						height: 141rpx;
						border-radius: 50%;
					}
			}
			.aoumtArr{
				border-top: 2rpx solid #EEEEEE;
				display: flex;
				height: 136rpx;
				justify-content: space-around;
				.aoumtItem{
					@include flexCol;
					align-items: center;
					justify-content: center;
					.num{
						color: #000000;
						font-size: 26rpx;
					}
					.label{
						margin-top: 20rpx;
						color: #6B6B6B;
						font-size: 22rpx;
					}
				}
			}
			
			
		}
	
		.arr{
			width: 700rpx;
			.arrType{
				height: 92rpx;
				background-color: #fff;
				width: 700rpx;
				margin-top: 16rpx;
				border-radius: 20rpx 20rpx 0 0;
				padding: 0 20rpx;
				// border-bottom: 2rpx solid red;
				display: flex;
				justify-content: space-evenly;
				.arrTypeItem{
					flex: 1;
					@include flexCenter;
					border-bottom: 2rpx solid #EEEEEE;
					font-size: 30rpx;
					.activeColor{
						color: $themeColor;
						position: relative;
						&::after{
							content: '';
							position: absolute;
							bottom: -50%;
							left: 0;
							transform: translateY(-50%);
							width: 100%;
							height: 7rpx;
							background: #FE5E10;
							border-radius: 4rpx;
						}
					}
				}
			}
			.arrItem{
				height: 355rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 0 0  20rpx 20rpx;
				margin-bottom: 13rpx;
				padding: 0 30rpx;
				.topContent{
					height: 198rpx;
					display: flex;
					align-items: center;
					width: 100%;
					border-bottom: 2rpx solid #eee;
					.cover{
						margin-right: 47rpx;
						image{
							width: 90rpx;
							height: 90rpx;
						}
					}
					.desc{
						flex: 1;
						@include flexCol;
						height: 100%;
						justify-content: space-evenly;
					}
				}
				.bottomContent{
					height: 156rpx;
					display: flex;
					flex-wrap: wrap;
					.rowItem{
						width: 50%;
						display: flex;
						align-items: center;
						.label{
							
						}
					}
				}
			}
		}
	}
	
</style>
